<!-- src/components/Todos.vue -->
<template>
    <div>
        <h2>Todos</h2>

        <div class="legend">
            <span>双击标记完成</span>
            <span>
                <span class="incomplete-box"></span>=未完成
            </span>
            <span>
                <span class="complete-box"></span>=完成
            </span>
        </div>

        <div class="todos">
            <div @dblclick="toggleTodo(todo.id)" v-for="todo in displayedTodos" :key="todo.id" class="todo"
                :class="{ 'is-completed': todo.completed }">
                {{ todo.title }}
                <el-button type="danger" size="small" color="#41b883" @click.stop="handleDeleteTodo(todo.id)"
                    style="position: absolute; bottom: 0; right:0;">
                    <el-icon>
                        <Delete />
                    </el-icon>
                </el-button>
            </div>
        </div>
    </div>
    
</template>
<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import { computed } from 'vue'
import { useStore } from 'vuex'
import { Delete } from '@element-plus/icons-vue'

const store = useStore()

// 接收父组件传入的过滤数量
const props = defineProps({
    filterCount: {
        type: Number,
        default: 200
    }
})

// 从store获取所有todos
const allTodos = computed(() => store.getters['todos/allTodos'])

// 计算显示的todos（根据过滤数量）
const displayedTodos = computed(() => {
    if (!allTodos.value || allTodos.value.length === 0) return []
    return allTodos.value.slice(0, props.filterCount)
})

// 双击切换任务完成状态
function toggleTodo(id) {
    store.commit('todos/TOGGLE_TODO', id)
}

// 删除任务
function handleDeleteTodo(id) {
    ElMessageBox.confirm(
        '确定要删除这个任务吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
        }
    )
        .then(() => {
            store.dispatch('todos/deleteTodo', id)
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            })
        })
}
</script>

<style scoped>
.todos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}

.todo {
    border: 1px solid #ccc;
    background-color: #41b883;
    padding: 1rem;
    border-radius: 5px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.delete-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
    cursor: pointer;
}

.legend {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
}

.incomplete-box {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #41b883;
}

.complete-box {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #060606;
}

.is-completed {
    background-color: #35495e;
    color: #fff;
}

@media (max-width: 500px) {
    .todos {
        grid-template-columns: 1fr;
    }
}
</style>
